﻿<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <h5 class="row-title"><i class="typcn typcn-folder themeprimary"></i>Simple Tabs</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <tabset>
                    <tab heading="Home">
                        <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                    </tab>
                    <tab heading="Profile">
                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                    </tab>
                    <tab heading="Last">
                        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                    </tab>
                </tabset>
                <div class="horizontal-space"></div>

            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget flat radius-bordered">
                    <div class="widget-header bg-themeprimary">
                        <span class="widget-caption">Flat Tabs in Widget</span>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main ">
                            <tabset flat="true">
                                <tab heading="Home">
                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                </tab>
                                <tab heading="Profile">
                                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                                </tab>
                                <tab heading="Last">
                                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                                </tab>
                            </tabset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <tabset class="tabs-left">
                    <tab heading="Home">
                        <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                        <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                    </tab>
                    <tab heading="Profile">
                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                    </tab>
                    <tab heading="Last">
                        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                    </tab>
                </tabset>
                <div class="horizontal-space"></div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <tabset class="tabs-right">
                    <tab heading="Home">
                        <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                        <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                    </tab>
                    <tab heading="Profile">
                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                    </tab>
                    <tab heading="Last">
                        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                    </tab>
                </tabset>
                <div class="horizontal-space"></div>
            </div>
        </div>

        <h5 class="row-title before-palegreen"><i class="fa fa-align-justify palegreen"></i>Justified Tabs</h5>
        <div class="row">
            <div class="col-lg-21 col-sm-12 col-xs-12">
                <tabset justified="true">
                    <tab heading="Home">
                        <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                    </tab>
                    <tab heading="Profile">
                        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                    </tab>
                    <tab heading="Last">
                        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                    </tab>
                </tabset>
            </div>
        </div>


        <h5 class="row-title before-darkorange"><i class="glyphicon glyphicon-magnet darkorange"></i>Tabs In Containers</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header">
                        <span class="widget-caption">Tabs in Widget</span>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main ">
                            <tabset>
                                <tab heading="Home">
                                    <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                                </tab>
                                <tab heading="Profile">
                                    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                                </tab>
                                <tab heading="Last">
                                    <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                                </tab>
                            </tabset>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-darkorange">Tabs In Well</div>
                    <tabset>
                        <tab heading="Home">
                            <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
                        </tab>
                        <tab heading="Profile">
                            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
                        </tab>
                        <tab heading="Last">
                            <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
                        </tab>
                    </tabset>
                </div>
            </div>
        </div>
        
        <h5 class="row-title before-azure"><i class="glyphicon glyphicon-magnet azure"></i>UI Bootstrap</h5>
        <div class="row">
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="well with-header">
                    <div class="header bordered-blue">Dynamic UI Bootstrap Tabs</div>
                    <div ng-controller="TabsDemoCtrl">
                        <p>Select a tab by setting active binding to true:</p>
                        <p>
                            <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
                            <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
                        </p>
                        <p>
                            <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
                        </p>
                        <hr />

                        <tabset>
                            <tab heading="Static title">Static content</tab>
                            <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
                                {{tab.content}}
                            </tab>
                            <tab select="alertMe()">
                                <tab-heading>
                                    <i class="glyphicon glyphicon-bell"></i> Alert!
                                </tab-heading>
                                I've got an HTML heading, and a select callback. Pretty cool!
                            </tab>
                        </tabset>

                        <hr />


                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 col-xs-12">
                <div class="widget">
                    <div class="widget-header bordered-bottom bordered-blue">
                        <span class="widget-caption">Dynamic UI Bootstrap Accordions</span>

                        <div class="widget-buttons">
                            <a href="" widget-maximize></a>
                            <a href="" widget-collapse></a>
                            <a href="" widget-dispose></a>
                        </div>
                    </div>
                    <div class="widget-body no-padding">
                        <div ng-controller="AccordionDemoCtrl">
                            <p style="padding: 20px 20px 0;" class="bg-whitesmoke">
                                <button class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
                                <button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
                                <label class="checkbox">
                                    <input type="checkbox" ng-model="oneAtATime">
                                    <span class="text">Open only one at a time</span>
                                </label>
                            </p>
                            <accordion close-others="oneAtATime">
                                <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
                                    This content is straight in the template.
                                </accordion-group>
                                <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                                    {{group.content}}
                                </accordion-group>
                                <accordion-group heading="Dynamic Body Content">
                                    <p>The body of the accordion group grows to fit the contents</p>
                                    <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
                                    <div ng-repeat="item in items">{{item}}</div>
                                </accordion-group>
                                <accordion-group is-open="status.open">
                                    <accordion-heading>
                                        I can have markup, too!
                                    </accordion-heading>
                                    This is just some content to illustrate fancy headings.
                                </accordion-group>
                            </accordion>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
